<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="baidu-site-verification" content="JdMif0g2tL" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
</head>
<body ng-app="myApp">

<div repeat-num="3">
	<p>你好</p>
</div>

<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
<script src="../js/angular.min.js" charset="utf-8"></script>
<script type="text/javascript">
	var app =angular.module('myApp', []);
	
	app.directive('repeatNum',function(){
		return{
			restrict:'A',
			// scope:'=',
			/*
			*@scope  指令作用域
			*@jqlite 指令元素jqlite对象	
			*@attrs  指令元素的属性对象
			*/
			link:function($scope,$jqlite,$attrs){
				// console.log(this);
				// console.log(arguments);
				//第一步获取num值
				var repeatNum=$attrs.repeatNum;
				// console.log($jqlite[0])
				//第三部渲染元素
				// for(var i=0;i<repeatNum;i++){
				// 	//第二部获取指令元素
				// 	var dom=$jqlite.clone();
				// 	console.log(dom);
				// 	console.log($jqlite.after);
				// 	$jqlite.after(dom)
				// }
				
				//获取子元素
				var dom=$jqlite.children();
				console.log(dom,repeatNum);
				for(var i=0;i<repeatNum;i++){
					//克隆元素
					var cloneDom=dom.clone();
					console.log(cloneDom);
					//将克隆的元素插入到元素后面
					$jqlite.append(cloneDom)
				}
			}
		}
	})
</script>
</body>
</html>